<template>
  <div class="city-index-bar">
    <div class="nav-bar">
      <van-nav-bar
        title="选择收货地址"
        @click-left="closeDialog"
        left-arrow
        fixed
        placeholder
        safe-area-inset-top
      ></van-nav-bar>
    </div>
    <!-- 城市列表 -->
    <van-index-bar :sticky="false" highlight-color="#fff">
      <div v-for="(group, index) in cityGroups" :key="index">
        <van-index-anchor :index="group.letter" />
        <van-cell
          v-for="city in group.cities"
          :key="city.name"
          :title="city.name"
          @click="selectCity(city)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getAllCity } from '@/api'

const props = defineProps({
  cityType: {
    type: Number,
    default: 0
  },
  seedingIndex: {
    type: Number,
    default: 0
  }
})

interface City {
  name: string
  code: string
  parentName: string
}

interface CityGroup {
  letter: string
  cities: City[]
}

// 城市数据
const cityGroups = ref<CityGroup[]>([])

onMounted(async () => {
  getCityInfo()
})

const getCityInfo = async () => {
  let { code, data } = await getAllCity()
  if (code === 200) {
    cityGroups.value = data
  }
}

const closeDialog = async () => {
  emit('closeDialog', props.seedingIndex)
}

// 选择城市
const selectCity = (city: City) => {
  // 触发选择事件
  emit('select', city, props.cityType, props.seedingIndex)
}

// 定义组件事件
const emit = defineEmits<{
  (e: 'select', city: City, type: number, index: number): void
  (e: 'closeDialog', index: number): void
}>()
</script>

<style lang="scss" scoped>
.city-index-bar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
  overflow: hidden;

  .van-index-bar {
    flex: 1;
    overflow-y: auto;
  }

  :deep(.van-index-bar__sidebar) {
    right: 0;
  }

  :deep(.van-index-anchor) {
    background-color: #f7f8fa;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #969799;
  }

  :deep(.van-cell) {
    font-size: 13px;

    &:active {
      background-color: #f2f3f5;
    }
  }

  .index-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.van-index-anchor) {
    color: #222 !important;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
  }

  :deep(.van-index-bar__sidebar) {
    right: 18px;
    background-color: #f5f5f5;
    border-radius: 14px;
  }

  :deep(.van-index-bar__index) {
    padding: 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #666;
    font-size: 10px;
    font-weight: 400;
    border-radius: 50%;
  }
  :deep(.van-index-bar__index--active) {
    background: #32bc05;
  }
  .van-cell {
    padding: 12px;
  }
  :deep(.van-cell__title) {
    line-height: 18px;
    color: #222;
    font-size: 14px;
  }
  :deep(.van-cell:after) {
    left: 0;
    right: 0;
  }
}
</style>
